<style lang="scss" scoped>
    .block-a {
        display: block;
        margin: 1em 0;
        text-align: center;
        border: 1px dashed #bbb;
        border-radius: 5px;
        outline: none;
        color: #666;
        cursor: pointer;
        line-height: 2em;

        &:hover {
            color: #409EFF;
            border: 1px dashed #409EFF;
            background-color: rgb(236, 245, 255);
        }
    }

</style>
<template>
    <ui-main :title="$route.name">
        <div class="item one">
            <el-form :model="form" ref="form" style="flex:1">
                <el-table ref="normalTable" header-cell-class-name="t-c" border 
                    size="mini" :data="form.custom">
                    <el-table-column align="center" label="序号" width="60">

                        <template slot-scope="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="名称">
                        <template slot-scope="scope">
                            <el-form-item :prop="'custom.' + scope.$index + '.gproject_name'" v-form-item-verifier
                                :rules="{required: true, message: '请输入名称', trigger: 'blur'}">
                                <el-input size="small" v-model="form.custom[scope.$index].gproject_name"
                                    placeholder="名称"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="描述" >
                        <template slot-scope="scope">
                            <el-form-item
                                :prop="'custom.' + scope.$index + '.gproject_comment'" v-form-item-verifier
                                :rules="{required: true, message: '请输入描述', trigger: 'blur'}">
                                <el-input size="small" v-model="form.custom[scope.$index].gproject_comment"
                                    placeholder="描述"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <!--class-name="tr-edit-operate"-->
                    <el-table-column align="center" label="操作" width="60px">
                        <template slot-scope="scope">
                            <ui-tab-btn name="删除" @click="delRow(scope.$index)"></ui-tab-btn>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <a class="block-a" @click="oneAddRow()">新增</a>
        </div>
        <div class="item one">
            <ui-load-md no-bar file="./formItemVerifier.md"></ui-load-md>
        </div>
    </ui-main>
</template>
<script>
    export default {
        data(){
            return {
                form: {
                    custom: [{
                    name: '',
                    intro: '',
                    id: '',
                    is_tmp: '1',
                    tproject_type: '0',
                },{
                    name: '',
                    intro: '',
                    id: '',
                    is_tmp: '1',
                    tproject_type: '0',
                },{
                    name: '',
                    intro: '',
                    id: '',
                    is_tmp: '1',
                    tproject_type: '0',
                }]
                }
            }
        },
        methods:{
            oneAddRow() {
                let obj = {
                    name: '',
                    intro: '',
                    id: '',
                    is_tmp: '1',
                    tproject_type: '0',
                }
                this.form.custom.push(obj);
            },
            delRow(index) {
                this.form.custom.splice(index, 1);
            },
        },
    }
</script>
